<script setup>
import { ref, watch } from 'vue'
import icon from '@renderer/assets/images/img-err.png?url'

const _props = defineProps({
  src: {
    type: String,
    default: ''
  }
})

const imgSrc = ref('')

watch(
  () => _props.src,
  (newVal) => {
    imgSrc.value = newVal?.replaceAll('&amp;', '&') || icon
  },
  { immediate: true }
)
</script>

<template>
  <div>
    <el-image class="w-24 h-full" :src="imgSrc" fit="fill" :preview-src-list="[imgSrc]" />
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-image-viewer__close) {
  width: 36px;
  height: 36px;
  margin-top: 20px;
}
</style>
